<template>
  <el-cascader
    v-model="_value"
    :options="options"
    :props="{ expandTrigger: 'hover', checkStrictly: true, value: valKey, label: labelKey }"
    clearable
    filterable
    :style="'width: 100%; max-width: ' + maxWidth"
    @change="change"
  />
</template>

<script>
import { getCommodityCategoryList } from '@/api/commodity'
export default {
  name: 'SelectGoodsCategory',
  props: {
    maxWidth: {
      type: String,
      default: '400px'
    },
    valKey: {
      type: String,
      default: 'value'
    },
    labelKey: {
      type: String,
      default: 'label'
    },
    value: {
      type: [String, Number, Object, Array],
      default: undefined
    }
  },
  data() {
    return {
      options: []
    }
  },
  computed: {
    _value: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
    this.getGoodTypeList()
  },
  methods: {
    change(value) {
      const vm = this
      vm.$emit('change', vm._value)
    },
    getGoodTypeList() {
      const vm = this
      getCommodityCategoryList().then(res => {
        vm.options = res.data.data
      }).catch(res => {
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
